import React from 'react';
import { ChevronLeft, MapPin, Calendar, Users, ChevronRight } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

const trainings = [
  {
    id: 1,
    title: '2024春雷行动',
    date: '2024.03.15 - 2024.03.20',
    location: '浙江 金华',
    participants: 156,
    status: 'completed',
    cover: 'https://images.unsplash.com/photo-1517457373958-b7bdd4587205'
  },
  {
    id: 2,
    title: '520狂欢活动',
    date: '2024.05.20 - 2024.05.21',
    location: '北京 朝阳',
    participants: 89,
    status: 'upcoming',
    cover: 'https://images.unsplash.com/photo-1511578314322-379afb476865'
  },
  {
    id: 3,
    title: '2024骄阳行动',
    date: '2024.07.01 - 2024.07.05',
    location: '广州 天河',
    participants: 120,
    status: 'upcoming',
    cover: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c'
  }
];

export default function MyTrainingsPage() {
  const navigate = useNavigate();

  const getStatusStyle = (status: string) => {
    switch (status) {
      case 'completed':
        return 'bg-green-100 text-green-600';
      case 'upcoming':
        return 'bg-blue-100 text-blue-600';
      default:
        return 'bg-gray-100 text-gray-600';
    }
  };

  const getStatusText = (status: string) => {
    switch (status) {
      case 'completed':
        return '已完成';
      case 'upcoming':
        return '即将开始';
      default:
        return '未知状态';
    }
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-white px-4 py-3 flex items-center border-b sticky top-0 z-10">
        <button onClick={() => navigate('/profile')} className="mr-4">
          <ChevronLeft className="w-6 h-6 text-gray-600" />
        </button>
        <h1 className="text-xl font-semibold">我参加的训练</h1>
      </div>

      <div className="p-4 space-y-4">
        {trainings.map(training => (
          <div
            key={training.id}
            onClick={() => navigate(`/detail/${training.id}`)}
            className="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300"
          >
            <div className="relative h-48">
              <img
                src={training.cover}
                alt={training.title}
                className="w-full h-full object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
              <div className="absolute bottom-4 left-4 right-4">
                <h3 className="text-xl font-bold text-white mb-2">{training.title}</h3>
                <div className="flex flex-wrap gap-2">
                  <span className="flex items-center bg-white/20 backdrop-blur-sm text-white rounded-full px-3 py-1 text-sm">
                    <Calendar className="w-4 h-4 mr-1.5" />
                    {training.date}
                  </span>
                  <span className="flex items-center bg-white/20 backdrop-blur-sm text-white rounded-full px-3 py-1 text-sm">
                    <MapPin className="w-4 h-4 mr-1.5" />
                    {training.location}
                  </span>
                  <span className="flex items-center bg-white/20 backdrop-blur-sm text-white rounded-full px-3 py-1 text-sm">
                    <Users className="w-4 h-4 mr-1.5" />
                    {training.participants}人
                  </span>
                </div>
              </div>
            </div>
            <div className="p-4 flex items-center justify-between">
              <span className={`px-3 py-1 rounded-full text-sm ${getStatusStyle(training.status)}`}>
                {getStatusText(training.status)}
              </span>
              <ChevronRight className="w-5 h-5 text-gray-400" />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}